<template>
  <view class="image-content">
    <template v-for="(item, index) in list" :key="item">
      <view class="image-item hasImage">
        <image
          @click="handlePreivew(item)"
          :src="item"
          class="image load"
          mode="aspectFill"
        ></image>
        <view class="delete" @click="handleDelete(item, index)"> × </view>
      </view>
    </template>
    <view
      class="image-item"
      v-if="list.length < maxLength"
      @click="hangleUpload"
    ></view>
  </view>
</template>

<script>
import {
  uploadImageList
} from './image.js'
export default {
  props: {
    // 压缩图片质量
    quality: {
      type: Number,
    },
    // 图片最大数量
    maxLength: {
      type: Number,
      default: 4,
    },
    // 图片列表
    list: {
      type: Array,
      default: [],
    },
  },
  methods: {
    /**
     * 上传图片
     */
    hangleUpload() {
      uni.chooseImage({
        count:
          this.maxLength - this.list.length > 9
            ? 9
            : this.maxLength - this.list.length,
        sizeType: ["original"],
        sourceType: ["album", "camera"],
        success: async (res) => {
          console.log(res);
          const uploadResult = await uploadImageList(
            res.tempFiles,
            this.quality
          );
          if (uploadResult.uploadSuccess) {
            const list = JSON.parse(JSON.stringify(this.list)).concat(
              uploadResult.imgCloudPath
            );
            this.$emit("imageList", list);
          }
        },
      });
    },
    /**
     * 删除图片
     */
    async handleDelete(item, index) {
      // 接入云函数删除-云对象：customize-common-delete
      // const customizeCommonDelete = uniCloud.importObject(
      //   "customize-common-delete"
      // ); // 导入云对象
      // const result = await customizeCommonDelete.deleteFileListCommon([item]);
      // if (result.fileList) {
      //   const list = JSON.parse(JSON.stringify(this.list));
      //   list.splice(index, 1);
      //   this.$emit("imageList", list);
      // }
      const list = JSON.parse(JSON.stringify(this.list));
      list.splice(index, 1);
      this.$emit("imageList", list);
    },
    /**
     * @param {Object} current
     * 点击-预览图片
     */
    handlePreivew(current) {
      uni.previewImage({
        urls: this.list,
        current,
      });
    },
  },
};
</script>

<style lang="scss">
.image-content {
  display: flex;
  flex-wrap: wrap;

  .image-item {
    margin: 0 20rpx 20rpx 0;
    display: flex;
    width: 150rpx;
    height: 150rpx;
    background: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/8485ad98-eb4a-4ed0-922b-917f8fc0df9c.png")
      no-repeat;
    background-size: 60rpx 60rpx;
    background-position: center center;
    border-radius: 10rpx;
    border: 1px solid rgba(51, 51, 51, 0.2);
    position: relative;

    &.hasImage {
      background: none;
    }

    .image {
      border-radius: 10rpx;
      width: 150rpx;
      height: 150rpx;
      opacity: 0;

      &.load {
        opacity: 1;
      }
    }

    .delete {
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 30rpx;
      height: 30rpx;
      color: #fff;
      text-align: center;
      border-radius: 50%;
      line-height: 30rpx;
      background: red;
    }
  }
}
</style>
